<template>
  <div class="course-file">
    <UploadFile ref="UploadFile" deleteFileList @e-fileData="saveFile" />
    <ul>
      <li v-for="item in fileList" :key="item.id">
        <a href="#"><i class="el-icon-document"></i> {{ item.name }}</a>
        <span class="el-icon-close" @click="handleDelete(item)"></span>
      </li>
    </ul>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import {
  sysCourseFilesAdd,
  sysCourseFilesDelete,
} from '@/api/admin/courseLibrary/sysCourseFiles.js'
export default {
  components: {
    UploadFile: () => import('@/components/uploadFile/index.vue'),
  },
  data() {
    return {
      fileList: [],
      form: {
        fileId: '', //资源ID
        courseId: '',
        type: 21,
        des: '思政设计附件', //资源介绍
      },
    }
  },
  computed: mapGetters(['curCourse']),
  watch: {
    curCourse: {
      immediate: true,
      handler(val) {
        if(!val) return
        let { id, sysCourseFiles } = val
        this.form.courseId = id
        this.fileList = sysCourseFiles.filter((v) => v.type == 21)
      },
    },
  },
  methods: {
    //思政设计
    saveFile(v) {
      this.form.fileId = v.map((item) => item.id).toString()
      this.filesAdd()
    },
    //新增思政设计
    filesAdd() {
      if (!this.form.fileId) return
      sysCourseFilesAdd(this.form).then((res) => {
        this.$bus.$emit('refreshCourseInfo')
        // this.$refs.UploadFile.clearFile()
      })
    },
    handleDelete(item) {
      sysCourseFilesDelete(item.id).then((res) => {
        this.$bus.$emit('refreshCourseInfo')
      })
    },
  },
}
</script>
<style scoped lang="scss">
.course-file {
  ul {
    li {
      transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
      font-size: 14px;
      color: #606266;
      line-height: 1.8;
      margin-top: 5px;
      position: relative;
      box-sizing: border-box;
      border-radius: 4px;
      width: 100%;
      &:hover {
        background-color: #f5f7fa;
      }
      a {
        color: #606266;
        display: block;
        margin-right: 40px;
        overflow: hidden;
        padding-left: 4px;
        text-overflow: ellipsis;
        transition: color 0.3s;
        white-space: nowrap;
      }
      span {
        position: absolute;
        right: 5px;
        top: 0;
        line-height: 25px;
        cursor: pointer;
      }
    }
  }
}
</style>